<template>
  <view class="container">
    <view class="list-item" v-for="(item,index) in list" :key="item.name">
      <view class="list-iten-top">
          <image :src="item.imgurl" style="width: 30px;height: 30px;"></image>
          <text class="list-iten-top-title">{{item.name}}</text>
          <text class="list-iten-top-status">{{item.status}}</text>
      </view>
      <view class="list-iten-bom">
        <view class="list-iten-bom-left">
          <radio-group @change="radioChange(item,$event)">
            <checkbox  :value="item.id" :checked="item.check" />
          </radio-group>         
        </view>
        <view class="list-iten-bom-rigth">
          <view class="list-iten-bom-rigth-title">
            {{item.discount}}
          </view>
          <view class="list-iten-bom-rigth-picandtext">
            <image :src="item.producturl" mode="" style="width: 110px;height: 110px;"></image>
            <view class="list-iten-bom-rigth-text">
              <view class="list-iten-bom-rigth-text-title">
                {{item.describe}}
              </view>
              <view class="list-iten-bom-rigth-text-size">
                {{item.size}}
              </view>
              <view class="list-iten-bom-rigth-text-num">
                {{item.pdiscount}}
              </view>
              <view class="list-iten-bom-rigth-text-price">
                <text style="color: red;font-weight: 700;font-size: 16px;">￥{{item.price}}</text>
                <text style="color: gainsboro;font-size: 12px;margin-left: 10rpx;">已拼{{item.pcount}}万件</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data(){
      return {
        list:[],
        storageChooseItem:[]
      }
    },
    methods:{
      radioChange(item,e){
        //不知道为啥这个item永远是第一个,不是点击的哪个item就是哪个item嘛?
        console.log(item,e.detail.value);
        // let checkid = e.detail.value;
        let checkid = item.id;
        let values = e.detail.value;
        const obj = this.list.find(v => v.id == checkid);
        if(values) {
          this.storageChooseItem.push(obj)
          this.$set(item,'check',true)
        }else {
          const index = this.storageChooseItem.findIndex(v=> v.id == checkid)
          console.log('index',index)
          if(index > -1){
            this.storageChooseItem.splice(index,1);
            this.$set(item,'check',fasle)
          }
        }
        
      },
      async getList(){
        let list = await this.$api.json('collections');
        console.log('获取到的模拟收藏数据',list);
        this.list = list;
      }
    },
    onLoad(){
      this.getList()
    }
  }
</script>

<style lang="scss">
  .container {
    background: #F2F2F2;
    height: 100vh;
  }
  
  // 每个item的样式
  .list-item {
    width: 100%;
    height: 380rpx;
    background: white;
    padding: 10rpx;
    margin-top:10rpx
  }
  .list-iten-top {
    justify-content: flex-start;
    display: flex;
    align-items: center;
  }
  .list-iten-top-title {
    margin-left: 12rpx;
    font-size: 12px;
  }
  .list-iten-top-status {
    margin-left: 12rpx;
    font-size: 12px;
    color: white;
    background: red;
    padding: 6rpx;
  }
  
  // box下方的样式
  .list-iten-bom {
    margin-top: 10rpx;    
    background: yellow;
    height: calc(100% - 80rpx);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .list-iten-bom-left {
    width: 10%;
    background: white;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .list-iten-bom-rigth {
    width: 90%;
    background: white;
    height: 100%;
  }
  
  .list-iten-bom-rigth-title {
    color: red;
    border: 1px solid red;
    font-size: 12px;
    width: 90px;
    text-align: center;
    margin-bottom: 10rpx;
  }
  
  // 图片和文案
  .list-iten-bom-rigth-picandtext {
    width: 100%;
    height: calc(100% - 18px);
    // background: blueviolet;
    display: flex;
    justify-content: space-between;
  }
  
  .list-iten-bom-rigth-text {
    width: calc(100% - 120px);
  }
  
  .list-iten-bom-rigth-text-title {
    font-size: 14px;
    font-weight: 600;
  }
  
  .list-iten-bom-rigth-text-size {
    border: 0.5px solid darkgray;
    color:black;
    font-size: 12px;
    margin-top: 10rpx;
    width: 140px;
  }
  
  .list-iten-bom-rigth-text-num {
    color: red;
    font-size: 14px;
    margin-top: 20rpx;
  }
</style>